<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>商品详情页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <style>
        .panel-heading {
            background-color: #f5f5f5; /* 轻微的灰色背景 */
            border-bottom: 1px solid #ddd; /* 轻微的边框 */
        }

        .product-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .product-price {
            color: red;
            font-size: 30px;
            margin-bottom: 15px;
        }

        .price {
            font-weight: bold; /* 价格加粗 */
        }

        .currency {
            font-size: 16px; /* 货币单位字体稍小 */
            vertical-align: super; /* 货币单位位置调整 */
        }

        .popularity {
            margin-bottom: 10px;
        }

        .popularity i {
            color: gold; /* 星级颜色调整为金色 */
        }

        .product-actions {
            margin-top: 20px;
        }

        .product-actions .btn {
            margin-right: 5px; /* 按钮之间留有间隔 */
        }


        .product-intro {
            background-color: #f9f9f9; /* 背景颜色 */
            border: 1px solid #ddd; /* 边框 */
            padding: 15px; /* 内边距 */
            margin-top: 20px; /* 上边距，与图片底部保持一定距离 */
            border-radius: 5px; /* 边框圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
        }

        .product-intro h4 {
            margin-top: 0; /* 标题不增加上边距 */
            color: #333; /* 字体颜色 */
            font-size: 18px; /* 字体大小 */
        }

        .product-intro p {
            color: #666; /* 字体颜色 */
            font-size: 14px; /* 字体大小 */
            line-height: 1.6; /* 行高 */
        }
    </style>
</head>
<body>
<%@ include file="header.jsp" %>

<div style="margin: 0 auto;width: 90%;">
    <ol class="breadcrumb">
        <li><a href="${pageContext.request.contextPath}/index.jsp">小米商城</a></li>
        <li><a href="#">手机</a></li>
        <%--		  <li class="active"><a href="getGoodsListByTypeId?typeid=${product.t_id}">手机</a></li>--%>
    </ol>
</div>


<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-6">
            <a href="#" class="thumbnail">
                <img src="image/${product.imageUrl}" width="560" height="560" alt="${product.productName}"/>
            </a>
            <!-- 新增的介绍框 -->
            <div class="product-intro">
                <h4>商品介绍</h4>
                <p>${product.description}</p>
            </div>
        </div>
        <div class="col-xs-6 col-md-6">
            <div class="panel panel-default">
                <!-- ... 其他内容 ... -->
                <div class="panel-heading">
                    商品详情
                </div>
                <div class="panel-body">
                    <h3 class="product-name">${product.productName}</h3>
                    <div class="product-price">
                        <span class="price">${product.price}</span><span class="currency">元</span>
                    </div>
                    <p>上市时间: ${product.launchDate}</p>
                    <div class="popularity">
                        <span>热销指数:</span>
                        <c:forEach begin="1" end="${product.popularityIndex}">
                            <i class="fas fa-star"></i> <!-- 使用Font Awesome的星星图标 -->
                        </c:forEach>
                    </div>
                    <div class="product-actions">
                        <a href="${pageContext.request.contextPath}/addCart.do?productId=${product.productId}"
                           class="btn btn-primary">
                            <i class="fas fa-cart-plus"></i> 加入购物车
                        </a>
                        <button class="btn btn-danger" onclick="fun1(${product.productId})">
                            <i class="fas fa-check"></i> 直接购买
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<script>
    function fun1(pid) {
        location.href = "${pageContext.request.contextPath}/dPu?productId=" + pid;
    }
</script>

<!-- 底部 -->
<%@ include file="footer.jsp" %>
"${pageContext.request.contextPath}/dPu?productId=" + pid
</body>
</html>